{% extends "base.html" %}

{% block content %}
    <!-- STATISTIC-->
    <section class="statistic statistic2">
        <div class="container">
            <div class="row">
                <div class="col-12" id="message-box">
                    
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-lg-3" id="task-0">
                    <div class="card">
                        <div class="card-header">
                            <h4>当前任务</h4>
                        </div>
                        <div class="card-body">
                            <p class="muted" id="task-0-title"></p>
                            <small id="task-0-cont"></small>
                            <hr>
                            <div class="progress mb-2">
                                <div class="progress-bar bg-success progress-bar-striped progress-bar-animated" id="processing-bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3" id="task-1" style="display: none;">
                    <div class="card">
                        <div class="card-header">
                            <h4>任务队列</h4>
                        </div>
                        <div class="card-body">
                            <p class="muted" id="task-1-title"></p>
                            <small id="task-1-cont"></small>
                            <hr>
                            <div class="progress mb-2">
                                <div class="progress-bar bg-success progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3" id="task-2" style="display: none;">
                    <div class="card">
                        <div class="card-header">
                            <h4>任务队列</h4>
                        </div>
                        <div class="card-body">
                            <p class="muted" id="task-2-title"></p>
                            <small id="task-2-cont"></small>
                            <hr>
                            <div class="progress mb-2">
                                <div class="progress-bar bg-success progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3" id="task-3" style="display: none;">
                    <div class="card">
                        <div class="card-header">
                            <h4>任务队列</h4>
                        </div>
                        <div class="card-body">
                            <p class="muted" id="task-3-title"></p>
                            <small id="task-3-cont"></small>
                            <hr>
                            <div class="progress mb-2">
                                <div class="progress-bar bg-success progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- END STATISTIC-->
    <!-- STATISTIC CHART-->
    <section class="statistic-chart">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h3 class="title-5 m-b-35">功能</h3>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6">
                    <div class="card">
                        <div class="card-header">
                            <strong>手动执行</strong>
                        </div>
                        <form id="manualExecute" enctype="multipart/form-data" class="form-horizontal">
                            {% csrf_token %}
                            <div class="card-body card-block">
                                <div class="row form-group">
                                    <div class="col col-md-3">
                                        <label for="select" class="form-control-label">任务</label>
                                    </div>
                                    <div class="col-12 col-md-9">
                                        <select name="task_select" id="task_select" class="form-control form-control-sm">
                                            {% for name, task in tasks.items %}
                                                <option value="{{ name }}">{{ task.desp }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                                <div class="row form-group param-group d-none" id="paramStartDate">
                                    <div class="col col-md-3">
                                        <label for="text-input" class="form-control-label">开始日期</label>
                                    </div>
                                    <div class="col-12 col-md-9">
                                        <input type="text" id="start_date" name="start_date" placeholder="未选择" class="input-sm form-control-sm form-control">
                                        <small class="form-text text-muted">YYYY/MM/DD</small>
                                    </div>
                                </div>
                                <div class="row form-group param-group d-none" id="paramEndDate">
                                    <div class="col col-md-3">
                                        <label for="text-input" class=" form-control-label">结束日期</label>
                                    </div>
                                    <div class="col-12 col-md-9">
                                        <input type="text" id="end_date" name="end_date" placeholder="未选择" class="input-sm form-control-sm form-control">
                                        <small class="form-text text-muted">YYYY/MM/DD</small>
                                    </div>
                                </div>

                                <div class="row form-group param-group d-none" id="paramPeriod">
                                    <div class="col col-md-3">
                                        <label for="text-input" class=" form-control-label">周期</label>
                                    </div>
                                    <div class="col-12 col-md-9">
                                        <select id="period" name="period" class="form-control">
                                            {% for period in periods %}
                                                <option value="{{ period }}">{{ period }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>

                                <div class="row form-group d-none"  id="executeDateTime">
                                    <div class="col col-md-3">
                                        <label for="text-input" class="form-control-label">执行时间</label>
                                    </div>
                                    <div class="col-12 col-md-9">
                                        <input type="text" id="execute_date" name="execute_date" placeholder="未选择" class="input-sm form-control-sm form-control">
                                        <small class="form-text text-muted">YYYY/MM/DD HH:MM:SS</small>
                                    </div>
                                </div>
                                <div class="row form-group">
                                    <div class="col col-md-3">
                                        <label class=" form-control-label"></label>
                                    </div>
                                    <div class="col col-md-9">
                                        <div class="form-check-inline form-check">
                                            <label for="inline-radio1" class="form-check-label" style="padding: 10px;">
                                                <input type="radio" id="inline-radio1" checked="checked" name="execute_type" value="now" class="form-check-input" onclick="$('#executeDateTime').addClass('d-none');">立即执行 
                                            </label>
                                            <label for="inline-radio2" class="form-check-label" style="padding: 10px;">
                                                <input type="radio" id="inline-radio2" name="execute_type" value="timer" class="form-check-input" onclick="$('#executeDateTime').removeClass('d-none');">稍后执行 
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <div class="card-footer">
                            <button type="" id="executeTask" class="au-btn au-btn-icon au-btn--blue au-btn--small" onclick="manual_execute();">
                                <i class="fa fa-dot-circle-o"></i>提交
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- END STATISTIC CHART-->
{% endblock %}

{% block jsscript %}
    <script>
        var TASKS = {{ tasks|safe }};
        
        $('#start_date').tempusDominus({
            display: {
                components: {
                    hours: false,
                    minutes: false,
                    seconds: false,
                }
            },
        })

        $('#end_date').tempusDominus({
            display: {
                components: {
                    hours: false,
                    minutes: false,
                    seconds: false,
                }
            }
        })
        var minExecuteDate = function () {var now = new Date(); now.setTime(now.getTime() + 60 * 1000); return now;};
        $('#execute_date').tempusDominus({
            //restrictions: {
            //    minDate: minExecuteDate()
            //},
            display: {
                components: {
                    seconds: true,
                    useTwentyfourHour: true,
                },
                icons: {
                    up: 'fa fa-solid fa-arrow-up',
                    down: 'fa fa-solid fa-arrow-down'
                },
                viewMode: 'clock',
                // sideBySide: true
            }
        })
        
        var showParamGroup = function() {
            $('.param-group').addClass('d-none');
            var selectTask = TASKS[$('#task_select').val()];
            for (var idx in selectTask.args) {
                var arg = selectTask.args[idx];
                $('#' + arg.container).removeClass('d-none')
            }
        };
        $('#task_select').change(showParamGroup);

        var input_names = ["start_date", "end_date", "execute_date", "period"];
        function manual_execute() {
            var postData = $('#manualExecute').parseForm();
            for (var idx in input_names) {
                
                var name = input_names[idx];
                if ($('#' + name).parents('.form-group').css('display') != 'none') {
                    if (! postData[name]) {
                        $('#' + name).addClass('input-invalid');
                        return;
                    } else {
                        $('#' + name).removeClass('input-invalid');
                    }
                }   
                postData[name] = postData[name].replaceAll('/', '-');
            }
            $.ajax({
                url: "/api/manual_execute", 
                type: "POST",
                data: postData,
                success: function(data){
                    if (data.code == '0') {
                        message("定时任务：" + $('#task_select option:selected').text() + " 添加成功！");
                    } else {
                        if (data.msg) {
                            message(data.msg, 'warn');
                        } else {
                            message("服务器发生错误！", 'warn');
                        }
                    }
                }
            });
        }
        function update_progress() {
            if (document.hidden) {
                return;
            }
            $.ajax({
                url: '/api/update_progress',
                type: 'GET',
                dataType: 'json',
                data: {},
                success: function(data){
                    var prog = data.proc_prog;
                    $('#processing-bar').css("width", prog + "%");
                    $('#processing-bar').text(prog + "%");
                    
                    $('#task-0-title').text((prog ? "执行中：" : "准备中：") + data.proc_task);
                    $('#task-0-cont').text(data.task_start_time);
                    
                    for (var i=1; i<4; i++) {
                        if (i <= data.task_queue.length) {
                            $('#task-' + i).css('display', '');
                            $('#task-' + i + '-title').text("等待中：" + data.task_queue[i-1].name);
                            $('#task-' + i + '-cont').text(data.task_queue[i-1].start_time);
                        } else {
                            $('#task-' + i).css('display', 'none');
                        }
                    }
                },
                error: function(){
                    return;
                }
            })
        }
        showParamGroup();
        update_progress();
        setInterval(update_progress, 1000);
    </script>
{% endblock %}